<template>
    <div>
        这是废品回收订单
        <div class="addCommuity">
            <!-- Form -->
            <el-button type="primary" @click="dialogFormVisible = true">新增小区</el-button>

        </div>
        <div>
            <el-dialog title="新增小区" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="门店名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="所属地区" :label-width="formLabelWidth">
                        <el-cascader
                                clearable
                                v-model="form.addressValue"
                                :options="addressAll"
                                :props="{value:'label'}">
                        </el-cascader>
                    </el-form-item>
                    <el-form-item :label-width="formLabelWidth">
                        <el-input v-model="form.addressDetail" autocomplete="off" placeholder="请填写详细地址"></el-input>
                    </el-form-item>
                    <el-form-item label="门店坐标" :label-width="formLabelWidth">
                        <el-button>获取位置</el-button>
                        <span style="margin-left: 10px">坐标位置为:{{form.positioon}}</span>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCommunity">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <el-upload
                action=""
                :show-file-list="false"
                on-success=""
                before-upload="">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>

<script>
    export default {
        name: "WasteRecycling",
        data:function () {
            return {
                dialogFormVisible: false, // 是否展示新增小区的弹框 默认为false 不展示
                dialogShopCountVisible: false, // 是否展示关联门店弹框
                formLabelWidth: '120px', // 弹框内容 文字的宽度
                form: { // 新增小区
                    name: '', // 门店名称
                    addressValue: [], // 所属地区: 省,市,县  选择的
                    addressDetail: '', // 详细地址   写入的
                    positioon: [],  // 坐标位置
                },
                imageUrl: ''
            }
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
        }
    }
</script>

<style scoped>

    /*.avatar-uploader .el-upload {*/
    /*    border: 1px dashed #d9d9d9;*/
    /*    border-radius: 6px;*/
    /*    cursor: pointer;*/
    /*    position: relative;*/
    /*    overflow: hidden;*/
    /*}*/
    /*.avatar-uploader .el-upload:hover {*/
    /*    border-color: #409EFF;*/
    /*}*/
    /*.avatar-uploader-icon {*/
    /*    font-size: 28px;*/
    /*    color: #8c939d;*/
    /*    width: 40px;*/
    /*    height: 40px;*/
    /*    line-height: 40px;*/
    /*    text-align: center;*/
    /*}*/
    /*.avatar {*/
    /*    width: 80px;*/
    /*    height: 80px;*/
    /*    display: block;*/
    /*}*/

</style>